<!-- 
    className：----------返回字符串
            .className      所有类名
            .className =    修改指定类名的内容（将类名原内容覆盖）


    classList：----------返回DOMTokenList对象
            .classList.add("类名", "类名",.....)        增加类名

            .classList.remove("类名", "类名",.....)     删除类名

            .classList.contains("类名")                 是否拥有类名

            .classList.toggle("类名")                   拥有该类名则删除该类名，未拥有则添加

            .classList.replace("原类名"，"新类名")       替换类名



 -->







<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类名操作</title>

    <style>
        /* className和classList */
        /* div {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        } */
    </style>


    <style>
        /* 点击展开菜单案例 */
        #target {
            width: 100px;
            height: 50px;
            background-color: red;
        }

        .rect {
            width: 100px;
            height: 0;
            background-color: rebeccapurple;
            transition: all 0.5s linear;
        }

        .show {
            height: 200px;
        }
    </style>




</head>

<body>


    <!-- <div id="xhz" class="div  div1  div2  div3"></div> -->



    <!-- 点击展开菜单案例 -->
    <div id="target" class="div div1 div2"></div>
    <div class="rect"></div>






    <!-- ------------------------------------------------------------------------------------------- -->




    <script>// // .className
        // let div = document.querySelector("div")
        // div.className = "divs"
        // console.log(div.className);     //  获取和修改指定类名内容
        // console.log(div.id);
    </script>




    <script>// // .classList
        // let div = document.querySelector("div")
        // console.log(div.classList);
        // div.classList.add("dz")     //  增加类名
        // console.log(div.className);
        // div.classList.remove("dz")        //  删除类名
        // console.log(div.classList);
        // console.log(div.classList.contains("dz"));  //  是否拥有类名
        // div.classList.toggle("dz")      //  拥有该类名则删除它，未拥有则添加它
    </script>




    <script>// // 点击展开菜单栏案例
        let div = document.querySelector("div")   //  获取目标
        let rect = document.querySelector(".rect")
        div.addEventListener("click", function () {   //  绑定事件
            rect.classList.toggle("show")
        })
    </script>




</body>

</html>